<template>
  <div class="mainPage">
    <div class="page-header">
      <div class="logo">
        <span>
          <i class="el-icon-eleme"></i>
        </span>
        <span style="padding-left: 10px">后台管理系统</span>
      </div>

      <div class="logo-right">
        <el-avatar
          :size="44"
          class="avatar"
          :src='$store.state.userInfo.headimgurl'
        ></el-avatar>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
           
            {{$store.state.userInfo.userName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">个人中心</el-dropdown-item>
            <el-dropdown-item
              icon="el-icon-circle-plus"
              @click.native="remoToken()"
              >退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!--navleft-->
    <div class="content">
        <div class="navBar">
            <Navleft/>
        </div>
        <div class="content-right">
            <router-view/>
        </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { removeToken } from "@/utils/cookies";
import Navleft from '@/components/NavLeft.vue'
import Cookies from 'js-cookie'

@Component({
  name: "mainpage",
  components:{
      Navleft
  }
})
export default class extends Vue {


  private remoToken() {
    removeToken();
    sessionStorage.clear();
    Cookies.remove('token')
    
    this.$router
      .push(`/login?redirect=${this.$route.fullPath}`)
      .catch((err) => {
        console.warn(err);
      });
  }
}
</script>

<style lang="less" scoped>
.mainPage{
    height: 100%;
}
.page-header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  color: #fff;
  background: #3c435b;
  height: 65px;
  line-height: 65px;
  text-align: left;

  display: flex;
  justify-content: space-between;
 
  .logo {
    font-size: 24px;
    margin-left: 30px;
  }
  .logo-right {
    margin-right: 30px;
    color: #fff;
    display: flex;
    align-items: center;
    .avatar {
      margin-right: 10px;
    }
    /deep/ .el-dropdown {
      color: #fff;
    }
  }
}

.content {
    display: flex;
    margin-top: 65px;
    .content-right{
      padding: 15px;
      background: #eee;
      width: 100%;
    }
    



}
</style>